<script setup>
import axios from "axios";
import {onMounted, ref} from "vue";
import GoodsItem from "@/views/home/components/GoodsItem.vue";
import {onBeforeRouteUpdate, useRoute} from "vue-router";

const route = useRoute()
const tabTypes = [
  { name: "new", label: "最新商品" },
  { name: "hot", label: "最高人气" },
  { name: "comments", label: "评论最多" },
]

// 获取全部商品
const clothesList = ref([])
const showAllClothes = () => {
  axios.get('/api/filterClothes?type=' + route.params.type).then(res => {
    clothesList.value = res.data.data;
  })
}

// 监测路由参数变化
const getTopCategory = async(type = route.params.type) => {
  await axios.get('/api/filterClothes?type=' + type).then(res => {
    clothesList.value = res.data.data;
  })
}
onBeforeRouteUpdate((to) => {
  console.log('路由变化');
  // console.log(to)
  getTopCategory(to.params.type)  // 使用最新的路由参数请求最新的分类数据
})

onMounted(() => {
  getTopCategory();
  showAllClothes();
})
</script>

<template>
  <div class="container ">
    <!-- 面包屑 -->
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/category' }">{{ route.params.type }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="sub-container">
      <el-tabs >
        <el-tab-pane v-for="item in tabTypes" :key="item.name" :label="item.label"></el-tab-pane>
      </el-tabs>
      <div class="ref-goods">
        <div class="body">
          <GoodsItem v-for="clothes in clothesList" :clothes="clothes" :key="clothes.clNo"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0 auto;
}
.container {
  width: 100%;
  background-color: #f5f5f5;
  padding-bottom: 20px;

  &:hover {
    color: #e180a4;
  }

  .bread-container {
    max-width: 1200px;
    padding: 25px 0;
    color: #666;
  }

  .sub-container {
    max-width: 1200px;
    padding: 20px 10px;
    background-color: #fff;

    .body {
      display: flex;
      flex-wrap: wrap;
      padding: 0 10px;
    }

    img {
      width: 160px;
      height: 160px;
    }

    p {
      padding-top: 10px;
    }

    .ref-goods {
      background-color: #fff;
      margin-top: 20px;
      position: relative;

      .body {
        margin: 0 auto;
        max-width: 1200px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 0 40px 30px;
      }
    }
  }
}

.el-breadcrumb ::v-deep .el-breadcrumb__inner:hover {
  color: #e180a4 !important;
}

.sub-container >>> .el-tabs__item:hover {
  color: #e180a4;
}

.sub-container >>> .el-tabs__item.is-active {
  color: #e180a4;
}

.sub-container >>> .el-tabs__active-bar {
  background-color: #e180a4;
}
</style>